<!-- 弹窗 详情 -->
//装置大停车和大检修管理
<script lang="tsx" setup>
import FileUpload from "@/components/file-system/file-upload.vue";
import { ElSelectV2, ElDatePicker } from "element-plus";
import type { FormDescChild } from "@/components/form-desc/form-desc.vue";
import {
	whManagerBsTbEqpCheckSaveOrUpdateUsingPost,
	whManagerBsTbEqpCheckGetEntityByIdIdUsingGet,
	whManagerBsTbEnterpriseGetListUsingPost,
} from "@/genapi/wh";
import { computedLoading } from "@/hooks/computed-loading";
import { useAsync } from "@/hooks/use-async";
import { EQP_CHECK_TYPE_OPTIONS } from "@/config/enum-options";

import { injectState } from "../state";

defineOptions({ name: "DetailDialog" });

const { page } = injectState()!;

const dialogRef = shallowRef<InstanceType<GlobalComponents["PromiseDialog"]>>();
const formDescRef = shallowRef<InstanceType<GlobalComponents["FormDesc"]>>();

const type = ref<"write" | "read">();

const beforeClose = async () => {
	if (type.value === "write") {
		await ElMessageBox.confirm("确认关闭？");
	}
};
const tableData = ref();

const trigger = async (_type: "write" | "read" = "read", value = {} as any) => {
	await whManagerBsTbEqpCheckGetEntityByIdIdUsingGet(value.id).then((res) => {
		tableData.value = res.data?.warnList;
	});
	type.value = _type;
	model.value = JSON.parse(JSON.stringify(value)) as any;
	await dialogRef.value?.open();
};

defineExpose({
	trigger,
});

const model = ref<(typeof page.records.value)[0]>({});

const file = computed({
	get() {
		if (model.value.fileId) {
			return [
				{
					id: model.value.fileId,
					name: model.value.fileName,
				},
			];
		}
	},
	set(value: any) {
		model.value.fileId = value?.[0]?.id;
	},
});

const title = computed(() => {
	if (type.value === "write") {
		return model.value.id ? "编辑" : "新增";
	} else {
		return `详情`;
	}
});

const { execute, isLoading } = useAsync(async () => {
	await formDescRef.value?.formRef?.validate();
	await ElMessageBox.confirm("确认提交？", "提示", {
		type: "warning",
	});

	await whManagerBsTbEqpCheckSaveOrUpdateUsingPost({
		data: {
			...model.value,
		},
	});
	ElMessage.success("提交成功");
	page.execute();
	dialogRef.value?.complete();
});
const textareaRows = ref(5);

const [enterpriseOptions] = computedLoading(async () => {
	const { data } = await whManagerBsTbEnterpriseGetListUsingPost({ data: {} });
	return data?.map((item) => ({ label: item.name, value: item.id! })) ?? [];
});

const children: FormDescChild[] = [
	{
		label: "企业名称",
		prop: "enterpriseId",
		rule: [{ required: true, message: "请输入", trigger: "blur" }],
		span: 1,
		formItem: () => (
			<el-select-v2
				options={enterpriseOptions.value}
				v-model={model.value.enterpriseId}
				placeholder="请输入"
			/>
		),
		descItem: () => `${model.value.enterpriseId ?? "-"}`,
	},
	{
		label: "检修类别",
		prop: "type",
		rule: [{ required: true, message: "请输入", trigger: "blur" }],
		span: 1,
		formItem: () => (
			<ElSelectV2
				options={[...EQP_CHECK_TYPE_OPTIONS]}
				v-model={model.value.type}
				clearable
				placeholder="请选择"
			/>
		),
		descItem: () => `${model.value.type ?? "-"}`,
	},
	{
		label: "检修地点",
		prop: "checkAddress",
		rule: [{ required: true, message: "请输入", trigger: "blur" }],
		span: 1,
		formItem: () => (
			<el-input
				v-model={model.value.checkAddress}
				placeholder="请输入"
				label-width="auto"
			/>
		),
		descItem: () => `${model.value.checkAddress ?? "-"}`,
	},
	{
		label: "检修开始时间",
		prop: "checkTimeStart",
		rule: [{ required: true, message: "请输入", trigger: "blur" }],
		span: 1,
		formItem: () => (
			<ElDatePicker
				type="datetime"
				class="w-100%!"
				valueFormat="YYYY-MM-DD HH:mm:ss"
				v-model={model.value.checkTimeStart}
				clearable
				placeholder="请输入检修开始时间"
			/>
		),
		descItem: () => `${model.value.checkTimeStart ?? "-"}`,
	},
	{
		label: "检修结束时间",
		prop: "checkTimeEnd",
		rule: [{ required: true, message: "请输入", trigger: "blur" }],
		span: 1,
		formItem: () => (
			<ElDatePicker
				type="datetime"
				class="w-100%!"
				valueFormat="YYYY-MM-DD HH:mm:ss"
				v-model={model.value.checkTimeEnd}
				clearable
				placeholder="请输入检修结束时间"
			/>
		),
		descItem: () => `${model.value.checkTimeEnd ?? "-"}`,
	},
	{
		label: "检修方案",
		prop: "checkPlan",
		rule: [{ required: true, message: "请输入", trigger: "blur" }],
		span: 2,
		formItem: () => (
			<el-input
				type="textarea"
				rows={textareaRows.value}
				v-model={model.value.checkPlan}
				placeholder="请输入"
			/>
		),
		descItem: () => `${model.value.checkPlan ?? "-"}`,
	},
	// {
	//   label: '附件名称',
	//   prop: 'fileId',
	//   rule: [{ required: true, message: '请输入', trigger: 'blur' }],
	//   span: 2,
	//   formItem: () => (
	//     <FileUpload v-model={file.value} limit={1} w="100%">
	//       <el-button type="primary">
	//         {{ icon: () => <el-icon class="i-custom:add"></el-icon>, default: () => '增加附件' }}
	//       </el-button>
	//     </FileUpload>
	//   ),
	//   descItem: () => <FileUpload v-model={file.value} limit={1} disabled={true} />,
	// },
	// {
	// 	label: "预警列表",
	// 	prop: "tiem",
	// 	span: 1,
	// 	formItem: () => (
	// 		<el-table data={tableData.value} style="width:200px">
	// 			<el-table-column prop="date" label="企业" />
	// 			<el-table-column prop="name" label="类别" />
	// 			<el-table-column prop="address" label="时间" />
	// 			<el-table-column prop="address" label="地点" />
	// 			<el-table-column prop="address" label="方案" />
	// 		</el-table>
	// 	),
	// 	// descItem: () => `${model.value.tiem ?? '-'}`,
	// },
];
</script>

<template>
	<PromiseDialog
		ref="dialogRef"
		:title="title"
		:before-close="beforeClose"
		w="707px!"
	>
		<el-scrollbar h="388px!">
			<div font-semibold>基本信息</div>

			<FormDesc
				ref="formDescRef"
				m="t-24px x-30px"
				:type="type === 'read' ? 'desc' : 'form'"
				form-class="gap-x-20px"
				:model="model"
				:column="2"
				:children="children"
			/>
			<div font-semibold mb-2>预警列表</div>
			<el-table :data="tableData" style="width: 700px" height="200">
				<el-table-column prop="enterpriseName" label="企业" />
				<el-table-column prop="checkPlan" label="检修方案" />
				<el-table-column prop="checkAddress" label="地点" />
				<!-- <el-table-column prop="address" label="地点" /> -->
				<el-table-column prop="checkTimeEnd" label="检修结束时间" />
			</el-table>
		</el-scrollbar>

		<template v-if="type === 'write'" #footer>
			<el-button @click="dialogRef?.close()">取消</el-button>
			<el-button type="primary" :is-loading="isLoading" @click="execute()"
				>确定</el-button
			>
		</template>
	</PromiseDialog>
</template>
